import { memo, useEffect, useState } from "react";
import { FloatButton } from "antd";
import { OpenAIOutlined } from "@ant-design/icons";
// 点击置顶
function GoTop() {
  // 控制返回顶部按钮的显示与隐藏
  const [isGoTop, setIsGoTop] = useState(false);
  useEffect(() => {
    const handleScroll = () => {
      setIsGoTop(window.scrollY > 100);
    }
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    }
  }, []);
  return (
    <FloatButton.Group>
      <FloatButton icon={<OpenAIOutlined />}></FloatButton>
      {isGoTop && <FloatButton.BackTop visibilityHeight={0} />}
    </FloatButton.Group>
  )
}

export default memo(GoTop);